<template>
  <div class="book-detail">
    <t-card :bordered="false" class="content-card">
      <template #title>
        <t-space size="18px">
          <!--<h2 class="card-title">{{ orderTypeOption[params.order_type] }}订单表</h2>-->
          <div>
            <h2 class="card-title">{{ warehouseName }}</h2>
            <p class="card-sub-title">{{ orderTypeOption[params.order_type] }}订单记录</p>
          </div>
          <!--<t-dropdown :min-column-width="80" placement="bottom" trigger="click">-->
          <!--  <template #dropdown>-->
          <!--    <t-dropdown-menu>-->
          <!--      <t-dropdown-item v-for="(item, index) in warehouseList" :key="index" @click="changeWarehouse(item)">-->
          <!--        <p>{{ item.name }}</p>-->
          <!--      </t-dropdown-item>-->
          <!--    </t-dropdown-menu>-->
          <!--  </template>-->
          <!--  <icon-font name="chevron-down-circle" />-->
          <!--</t-dropdown>-->
          <!--<t-link class="edit-btn-color" hover="color">编辑</t-link>-->
        </t-space>
      </template>
      <template #actions>
        <t-space size="8px">
          <t-button v-if="params.order_type === 0" @click="handleWarehousing" class="add-btn">
            <p class="flex align-center">
              <i class="iconfont icon-warehousing" style="font-size: 24px;margin-right: 4px"></i>入库
            </p>
          </t-button>
          <t-button v-if="params.order_type === 1" @click="handleOutbound" class="add-btn">
            <p class="flex align-center">
              <i class="iconfont icon-outbound" style="font-size: 24px;margin-right: 4px"></i>出库
            </p>
          </t-button>
          <t-button v-if="params.order_type === 2" @click="handleAllocation" class="add-btn">
            <p class="flex align-center">
              <i class="iconfont icon-warehousing" style="font-size: 24px;margin-right: 4px"></i>调拨
            </p>
          </t-button>
          <t-button v-if="params.order_type === 3" @click="handleInventory" class="add-btn">
            <p class="flex align-center">
              <i class="iconfont icon-warehousing" style="font-size: 24px;margin-right: 4px"></i>盘点
            </p>
          </t-button>
        </t-space>
      </template>

      <div class="filter ">
        <t-space size="12px">
          <!--<t-select style="width: 140px;" v-model="params.order_type" :options="typeOptions" clearable @change="getData" placeholder="按订单类型">-->
          <!--  <template #label>-->
          <!--    <icon-font name="layers" style="color: #000;"/>-->
          <!--  </template>-->
          <!--</t-select>-->
          <!--<t-select style="width: 140px;" v-model="params.is_del" :options="statusOptions" clearable @change="getData" placeholder="按订单状态">-->
          <!--  <template #label>-->
          <!--    <icon-font name="layers" style="color: #000;"/>-->
          <!--  </template>-->
          <!--</t-select>-->
          <t-input style="width: 260px;" v-model="params.key" clearable @change="getData" placeholder="搜索：单号/批号/联系人/经办人">
            <template #label>
              <icon-font name="search" size="16px" style="color:#000;font-weight: bold"/>
            </template>
          </t-input>
        </t-space>
      </div>

      <div class="pt16">
        <!--<t-table-->
        <!--  rowKey="id"-->
        <!--  :data="lists"-->
        <!--  :columns="columns"-->
        <!--  :stripe="stripe"-->
        <!--  :bordered="bordered"-->
        <!--  :hover="hover"-->
        <!--  :size="size"-->
        <!--  :max-height="maxHeight"-->
        <!--  :table-layout="tableLayout ? 'auto' : 'fixed'"-->
        <!--  :showHeader="showHeader"-->
        <!--  cellEmptyContent="-"-->
        <!--  resizable-->
        <!--  :loading="loading"-->
        <!--  @page-change="pageChange"-->
        <!--  :pagination="pagination"-->
        <!--  :selected-row-keys="selectedRowKeys"-->
        <!--  @select-change="handleSelectChange"-->
        <!--&gt;-->
        <!--  <template #title-slot-option></template>-->
        <!--  <template #thumb="{row}">-->
        <!--    <t-image-viewer :images="[row.thumb]" :closeOnEscKeydown="false">-->
        <!--      <template #trigger="{ open }">-->
        <!--        <div class="tdesign-demo-image-viewer__ui-image" @click="open">-->
        <!--          <p class="prod-img">-->
        <!--            &lt;!&ndash;<img alt="test" :src="row.thumb"/>&ndash;&gt;-->
        <!--            <img alt="图片" src="@/assets/product.png" />-->
        <!--          </p>-->
        <!--          <div class="tdesign-demo-image-viewer__ui-image&#45;&#45;hover">-->
        <!--            <span><browse-icon size="1.4em"/> </span>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--      </template>-->
        <!--    </t-image-viewer>-->
        <!--  </template>-->
        <!--  <template #order_type="{row}">-->
        <!--    &lt;!&ndash;（0入库；1 出库；2 调拨；）&ndash;&gt;-->
        <!--    <p v-if="row.order_type === 0">入库</p>-->
        <!--    <p v-if="row.order_type === 1">出库</p>-->
        <!--    <p v-if="row.order_type === 2">调拨</p>-->
        <!--    <p v-if="row.order_type === 3">盘点</p>-->
        <!--  </template>-->
        <!--  <template #product_total_price="{row}">-->
        <!--    <p>￥{{ row.product_total_price ? row.product_total_price : '0.00' }}</p>-->
        <!--  </template>-->
        <!--  <template #discount_amount="{row}">-->
        <!--    <p>￥{{ row.discount_amount ? row.discount_amount : '0.00' }}</p>-->
        <!--  </template>-->
        <!--  <template #option="{row}">-->
        <!--    <t-space size="12px">-->
        <!--      &lt;!&ndash;<t-link theme="primary" class="edit-btn-color" hover="color" @click="handleEdit(row)">编辑</t-link>&ndash;&gt;-->
        <!--      <t-link theme="primary" class="edit-btn-color" hover="color" @click="handleInfo(row)">详情</t-link>-->
        <!--      <t-popconfirm theme="danger" placement="top-right" confirm-btn="删除" @confirm="handleDelete($event, row)">-->
        <!--        <template #content>-->
        <!--          <div>-->
        <!--            <h3 class="popconfirm-title">确认删除？</h3>-->
        <!--            <p>删除后数据将不可以恢复！是否确认删除？</p>-->
        <!--          </div>-->
        <!--        </template>-->
        <!--        <t-link theme="danger" variant="outline" hover="color">删除</t-link>-->
        <!--      </t-popconfirm>-->
        <!--    </t-space>-->
        <!--  </template>-->
        <!--</t-table>-->

        <t-table
          rowKey="id"
          :data="lists2"
          :columns="columns2"
          :stripe="stripe"
          :bordered="bordered"
          :hover="hover"
          :size="size"
          :max-height="maxHeight"
          :table-layout="tableLayout ? 'auto' : 'fixed'"
          :showHeader="showHeader"
          cellEmptyContent="-"
          resizable
          :loading="loading"
          @page-change="pageChange"
          :pagination="pagination"
          :selected-row-keys="selectedRowKeys"
          @select-change="handleSelectChange"
        >
          <template #product_title="{row}">
            <div class="">
              <p class="item-title">{{row.product_title}}</p>
              <p v-if="row.sn" class="item-sn">S/N:{{ row.sn }}</p>
            </div>
          </template>
          <template #in_price="{row}">
            <div class="flex align-center">
              <p>{{row.in_price ? `￥${row.in_price}` : '-'}}</p>
            </div>
          </template>
          <template #out_price="{row}">
            <div class="flex align-center">
              <p>{{row.out_price ? `￥${row.out_price}` : '-'}}</p>
            </div>
          </template>
          <template #sell_price="{row}">
            <div class="flex align-center">
              <p>{{row.sell_price ? `￥${row.sell_price}` : '-'}}</p>
              <t-tooltip v-if="!row.sell_price" content="请到产品库设置产品的售价">
                <icon-font name="help-circle" style="margin-left: 6px"></icon-font>
              </t-tooltip>
            </div>
          </template>
          <template #option="{row}">
            <t-space size="12px">
              <t-link v-if="row.quantity > 0 && params.order_type === 0" theme="primary" class="edit-btn-color" hover="color">出库</t-link>
              <t-link theme="primary" class="edit-btn-color" hover="color">详情</t-link>
              <!--<t-popconfirm theme="danger" placement="top-right" confirm-btn="删除" @confirm="handleDelete($event, row)">-->
              <!--  <template #content>-->
              <!--    <div>-->
              <!--      <h3 class="popconfirm-title">确认删除？</h3>-->
              <!--      <p>删除后数据将不可恢复！是否确认删除？</p>-->
              <!--    </div>-->
              <!--  </template>-->
              <!--  <t-link theme="danger" variant="outline" hover="color">删除</t-link>-->
              <!--</t-popconfirm>-->
            </t-space>
          </template>
        </t-table>
      </div>
    </t-card>


    <!-- 产品入库 -->
    <product-warehousing ref="warehousing" :warehouse_id="params.warehouse_id" @refresh="getList"></product-warehousing>
    <!-- 产品出库 -->
    <product-outbound ref="outbound" :warehouse_id="params.warehouse_id" @refresh="getList"></product-outbound>
    <!-- 产品调拨 -->
    <product-allot ref="allot" :warehouse_id="params.warehouse_id"></product-allot>
    <!-- 产品盘点 -->
    <product-inventory ref="inventory" :warehouse_id="params.warehouse_id"></product-inventory>

    <!--<product-add ref="add" :warehouseId="warehouseId" @refresh="getData"></product-add>-->

    <!-- 订单详情 -->
    <order-info ref="info"></order-info>
  </div>
</template>

<script lang="jsx">
import {IconFont, CalendarIcon, BrowseIcon} from "tdesign-icons-vue";
import IconUAV from "@/components/icon-UAV/index.vue";
import ProductAdd from "@/pages/warehouse/order-list/add/index.vue";
import {warehouse_orderDeleteApi, warehouse_orderListApi} from "@/api/InOutStorage";
import OrderInfo from "@/pages/warehouse/order-list/components/order-info.vue";
import {warehouseListApi} from "@/api/warehouse";
import ProductAllot from "@/pages/warehouse/components/product-allot/product-allot.vue";
import ProductWarehousing from "@/pages/warehouse/components/product-warehousing/product-warehousing.vue";
import ProductInventory from "@/pages/warehouse/components/product-inventory/product-inventory.vue";
import ProductOutbound from "@/pages/warehouse/components/product-outbound/product-outbound.vue";

export default {
  name: 'Warehousing',
  components: {
    ProductOutbound,
    ProductInventory,
    ProductWarehousing,
    ProductAllot,
    OrderInfo, IconUAV, IconFont, BrowseIcon, ProductAdd},
  data() {
    return {
      renderPrefixIcon: () => <CalendarIcon/>,
      params: {
        page: 1,  // 当前页
        limit: 10,  // 每页条数
        warehouse_id: '', // 仓库id
        order_type: 0, // 订单类型（0入库；1出库；2调拨；3盘点）
        key: '',  // 搜索：单号/批号/联系人/经办人
        is_del: '', // 状态
      },
      lists: [],
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'id', title: 'ID', width: 60},
        {colKey: 'order_type', title: '订单类型', width: 90},
        //{colKey: 'warehouse_name', title: '仓库名称', width: 160},
        {colKey: 'order_no', title: '单号', width: 180},
        {colKey: 'product_count', title: '产品数', width: 140},
        {colKey: 'product_total_price', title: '实际入库金额', width: 140},
        {colKey: 'discount_amount', title: '总优惠金额', width: 140},
        {colKey: 'linkman', title: '联系人', width: 140},
        {colKey: 'phone', title: '联系电话', width: 140},
        {colKey: 'operator_name', title: '经办人', width: 140},
        {colKey: 'order_date', title: '订单日期', width: 140},
        {colKey: 'creation_time', title: '创建时间', width: 180},
        {colKey: 'update_time', title: '更新时间', width: 220},
        {colKey: 'option', title: 'title-slot-option', fixed: 'right', width: 120},
      ],
      selectedRowKeys: [],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 20,
      },
      maxHeight: 472,
      loading: false,

      typeOptions: [
        //（0 入库；1 出库；2 调拨；3 盘点）
        { label: '入库', value: 0 },
        { label: '出库', value: 1 },
        { label: '调拨', value: 2 },
        { label: '盘点', value: 3 },
      ],
      statusOptions: [
        { label: '正常', value: 0 },
        { label: '回收站', value: 1 },
      ],

      orderTypeOption: {
        0: '入库',
        1: '出库',
        2: '调拨',
        3: '盘点'
      },

      warehouseList: [],
      warehouseName: '',
      warehouseId: '',



      columns2: [],

      lists2: [],

      // 入库表格
      warehousingColumns: [
        {colKey: 'id', title: 'ID', align: 'center', width: 56,},
        {colKey: 'product_title', title: '产品标题', minWidth: 220, ellipsis: true},
        {colKey: 'unit_title', title: '单位', align: 'center', width: 70},
        {colKey: 'quantity', title: '数量', align: 'center', width: 110},
        {colKey: 'in_price', title: '入库价格', width: 110},
        {colKey: 'sell_price', title: '出售价', width: 110},
        {colKey: 'option_name', title: '操作员', width: 110,},
        {colKey: 'remark', title: '备注', width: 220, ellipsis: true},
        {colKey: 'option_time', title: '操作时间', width: 180,},
        {colKey: 'option', title: '', fixed: 'right', width: 160},
      ],

      warehousingList: [
        {id: 1, option_name: '操作员A', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '台', quantity: 1, in_price: 100, sell_price: 100, remark: '入库备注', option_time: '2024-08-13 16:25:03'},
        {id: 2, option_name: '操作员B', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '台', quantity: 1, in_price: 100, sell_price: 100, remark: '入库备注', option_time: '2024-08-13 16:25:03'},
        {id: 3, option_name: '操作员C', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '台', quantity: 1, in_price: 100, sell_price: '', remark: '入库备注', option_time: '2024-08-13 16:25:03'},
        {id: 4, option_name: '操作员D', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '台', quantity: 1, in_price: 100, sell_price: 100, remark: '入库备注', option_time: '2024-08-13 16:25:03'},
        {id: 5, option_name: '操作员E', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '台', quantity: 1, in_price: 100, sell_price: 100, remark: '入库备注', option_time: '2024-08-13 16:25:03'},
        {id: 6, option_name: '操作员F', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '台', quantity: 1, in_price: 100, sell_price: '', remark: '入库备注', option_time: '2024-08-13 16:25:03'},
        {id: 7, option_name: '操作员G', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '台', quantity: 1, in_price: 100, sell_price: 100, remark: '入库备注', option_time: '2024-08-13 16:25:03'},
        {id: 8, option_name: '操作员H', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '台', quantity: 1, in_price: 100, sell_price: 100, remark: '入库备注', option_time: '2024-08-13 16:25:03'},
        {id: 9, option_name: '操作员I', product_title: 'D JI MINI4 PRO', sn: '', unit_title: '件', quantity: 10, in_price: 68, sell_price: 68, remark: '入库备注', option_time: '2024-08-13 16:25:03'},
        {id: 10, option_name: '操作员K', product_title: 'D JI MINI4 PRO', sn: '', unit_title: '件', quantity: 20, in_price: 68, sell_price: '', remark: '入库备注', option_time: '2024-08-13 16:25:03'},
      ],

      // 出库表格
      outboundColumns: [
        {colKey: 'id', title: 'ID', align: 'center', width: 56,},
        {colKey: 'product_title', title: '产品标题', minWidth: 220, ellipsis: true},
        //{colKey: 'sn', title: '产品SN', width: 220},
        {colKey: 'unit_title', title: '单位', align: 'center', width: 90},
        {colKey: 'quantity', title: '数量', align: 'center', width: 110},
        {colKey: 'in_price', title: '入库价格', width: 110},
        {colKey: 'out_price', title: '出库价格', width: 110},
        {colKey: 'sell_price', title: '出售价', width: 110},
        {colKey: 'option_name', title: '操作员', width: 110,},
        {colKey: 'remark', title: '备注', width: 220, ellipsis: true},
        {colKey: 'option_time', title: '操作时间', width: 180,},
        {colKey: 'option', title: '', fixed: 'right', width: 160},
      ],
      outboundList: [
        {id: 1, option_name: '操作员A', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: 100, remark: '出库备注', option_time: '2024-08-13 16:25:03'},
        {id: 2, option_name: '操作员B', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: 100, remark: '出库备注', option_time: '2024-08-13 16:25:03'},
        {id: 3, option_name: '操作员C', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: '', remark: '出库备注', option_time: '2024-08-13 16:25:03'},
        {id: 4, option_name: '操作员D', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: 100, remark: '出库备注', option_time: '2024-08-13 16:25:03'},
        {id: 5, option_name: '操作员E', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: 100, remark: '出库备注', option_time: '2024-08-13 16:25:03'},
        {id: 6, option_name: '操作员F', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: 100, remark: '出库备注', option_time: '2024-08-13 16:25:03'},
        {id: 7, option_name: '操作员G', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: '', remark: '出库备注', option_time: '2024-08-13 16:25:03'},
        {id: 8, option_name: '操作员H', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: 100, remark: '出库备注', option_time: '2024-08-13 16:25:03'},
        {id: 9, option_name: '操作员I', product_title: 'D JI MINI4 PRO', sn: '', unit_title: '件', quantity: 10, in_price: 68, out_price: 100, sell_price: 68, remark: '入库备注', option_time: '2024-08-13 16:25:03'},
        {id: 10, option_name: '操作员K', product_title: 'D JI MINI4 PRO', sn: '', unit_title: '件', quantity: 20, in_price: 68, out_price: 100, sell_price: '', remark: '入库备注', option_time: '2024-08-13 16:25:03'},
      ],

      // 调拨表格
      allotColumns: [
        {colKey: 'id', title: 'ID', align: 'center', width: 56,},
        {colKey: 'product_title', title: '产品标题', minWidth: 220, ellipsis: true},
        //{colKey: 'sn', title: '产品SN', width: 220},
        {colKey: 'unit_title', title: '单位', align: 'center', width: 70},
        {colKey: 'quantity', title: '数量', align: 'center', width: 70},
        {colKey: 'in_price', title: '入库价格', width: 90},
        //{colKey: 'out_price', title: '出库价格', width: 90},
        {colKey: 'sell_price', title: '出售价', width: 90},
        {colKey: 'from_warehouse', title: '来源仓库', width: 100},
        {colKey: 'to_warehouse', title: '目标仓库', width: 100},
        {colKey: 'option_name', title: '操作员', width: 90,},
        {colKey: 'remark', title: '备注', width: 120, ellipsis: true},
        {colKey: 'option_time', title: '操作时间', width: 180,},
        {colKey: 'option', title: '', fixed: 'right', width: 160},
      ],
      allotList: [
        {id: 1, option_name: '操作员A', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: 100, from_warehouse:'来源仓库A', to_warehouse: '目标仓库B', remark: '调拨备注', option_time: '2024-08-13 16:25:03'},
        {id: 2, option_name: '操作员B', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: 100, from_warehouse:'来源仓库A', to_warehouse: '目标仓库B', remark: '调拨备注', option_time: '2024-08-13 16:25:03'},
        {id: 3, option_name: '操作员C', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: 100, from_warehouse:'来源仓库A', to_warehouse: '目标仓库B', remark: '调拨备注', option_time: '2024-08-13 16:25:03'},
        {id: 4, option_name: '操作员D', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: '', from_warehouse:'来源仓库A', to_warehouse: '目标仓库B', remark: '调拨备注', option_time: '2024-08-13 16:25:03'},
        {id: 5, option_name: '操作员E', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: 100, from_warehouse:'来源仓库A', to_warehouse: '目标仓库B', remark: '调拨备注', option_time: '2024-08-13 16:25:03'},
        {id: 6, option_name: '操作员F', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: 100, from_warehouse:'来源仓库A', to_warehouse: '目标仓库B', remark: '调拨备注', option_time: '2024-08-13 16:25:03'},
        {id: 7, option_name: '操作员G', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: '', from_warehouse:'来源仓库A', to_warehouse: '目标仓库B', remark: '调拨备注', option_time: '2024-08-13 16:25:03'},
        {id: 8, option_name: '操作员H', product_title: 'D JI MINI4 PRO', sn: 'ABCKS-23884-2832332923', unit_title: '件', quantity: 1, in_price: 100, out_price: 100, sell_price: 100, from_warehouse:'来源仓库A', to_warehouse: '目标仓库B', remark: '调拨备注', option_time: '2024-08-13 16:25:03'},
        {id: 9, option_name: '操作员I', product_title: 'D JI MINI4 PRO', sn: '', unit_title: '件', quantity: 10, in_price: 68, out_price: 100, sell_price: 68, from_warehouse:'来源仓库A', to_warehouse: '目标仓库B', remark: '入库备注', option_time: '2024-08-13 16:25:03'},
        {id: 10, option_name: '操作员K', product_title: 'D JI MINI4 PRO', sn: '', unit_title: '件', quantity: 20, in_price: 68, out_price: 100, sell_price: '', from_warehouse:'来源仓库A', to_warehouse: '目标仓库B', remark: '入库备注', option_time: '2024-08-13 16:25:03'},
      ],

    };
  },
  mounted() {
    // 获取屏幕高度 - 顶部高度
    let height = document.documentElement.clientHeight - 244;
    this.maxHeight = height
    window.onresize = () => {
      // 获取屏幕高度 - 顶部高度
      height = document.documentElement.clientHeight - 244;
      this.maxHeight = height
    };

    const { orderType, warehouseId } = this.$route.query
    this.params.order_type = orderType ? Number(orderType) : 0
    this.warehouseId = Number(warehouseId)
    this.params.warehouse_id = Number(warehouseId)

    if (this.params.order_type === 0) {
      this.columns2 = this.warehousingColumns
      this.lists2 = this.warehousingList
    }

    if (this.params.order_type === 1) {
      this.columns2 = this.outboundColumns
      this.lists2 = this.outboundList
    }

    if (this.params.order_type === 2) {
      this.columns2 = this.allotColumns
      this.lists2 = this.allotList
    }


    //if (this.params.order_type === 2) {
    //  this.columns.splice(2, 1, {colKey: 'warehouse_name', title: '调出仓库', width: 140})
    //  this.columns.splice(3, 0, {colKey: 'next_warehouse_name', title: '调入仓库', width: 160})
    //}

    this.getData()
    this.getWarehouseList()
  },
  methods: {
    // 切换仓库
    changeWarehouse(item) {
      this.warehouseName = item.name
      this.warehouseId = item.id
      this.params.warehouse_id = item.id

      this.$router.replace({
        path: this.$route.path,
        query: { warehouseId: item.id }
      });
      this.getData()
    },
    // 获取仓库列表
    getWarehouseList() {
      const params = {
        page: 1,  // 当前页
        limit: 9999,  // 每页条数
      }
      warehouseListApi(params).then(res => {
        this.warehouseList = res.data
        let data = this.warehouseList.find(item => item.id === this.warehouseId)
        this.warehouseName = data.name
      })
    },
    // 入库
    handleWarehousing() {
      this.$refs.warehousing.open(0)
    },
    // 出库
    handleOutbound() {
      this.$refs.outbound.open(1)
    },
    // 调拨
    handleAllocation() {
      this.$refs.allot.open(2)
    },
    // 盘点
    handleInventory() {
      this.$refs.inventory.open(3)
    },
    // 编辑
    handleEdit(row) {
      switch (this.params.order_type) {
        case 0:
          this.$refs.warehousing.open(0, row)
          break
        case 1:
          this.$refs.outbound.open(1, row)
          break
        case 2:
          this.$refs.allot.open(2, row)
          break
        case 3:
          this.$refs.inventory.open(3, row)
          break
      }
    },
    // 详情
    handleInfo(row) {
      this.$refs.info.open(row.id)
    },
    // 复制
    handleCopy(row) {
      this.$refs.add.open(this.params.order_type, row)
    },
    // 删除
    handleDelete(evt, row) {
      warehouse_orderDeleteApi({id: row.id}).then(res => {
        this.$message.success('删除成功')
        this.getList()
      }).catch(err => {
        console.log('err', err)
      })
    },
    // 获取数据
    getData() {
      this.pagination.defaultCurrent = 1
      this.getList()
    },
    // 获取列表
    getList() {
      this.loading = true
      this.params.page = this.pagination.defaultCurrent
      warehouse_orderListApi(this.params).then(res => {
        this.pagination.total = res.count
        this.lists = res.data
      }).catch(err => {
      }).finally(() => {
        this.loading = false
      })
    },
    // 切换分页
    pageChange(pageInfo) {
      const {current, defaultCurrent, defaultPageSize,} = pageInfo
      this.pagination.defaultCurrent = current
      this.getList()
    },
    handleSelectChange(value, {selectedRowData}) {
      this.selectedRowKeys = value;
    },
  },
}
</script>

<style lang="less" scoped>
.book-detail {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--td-radius-medium);
  background-color: #FFFFFF;
}

.item-title {
  font-weight: 500;
}

.item-sn {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: rgba(0,0,0,0.6);
}

/deep/ .content-card {

  .t-card__header {
    padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
    padding-bottom: 0;
  }

  .t-card__body {
    padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl) var(--td-comp-paddingTB-m);
  }

  .card-sub-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: #000000;
    padding-top: 8px;
  }

  .setting-btn {
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    text-align: left;
    color: #005687;
  }

  .invite-btn {
    font-size: 12px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    color: #005687;

    background-color: #F3FBFF;
    border: 1px solid #005687;
    border-radius: var(--td-radius-default);
  }
}

/deep/ .action-btn {
  width: 126px;
  height: 42px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  text-align: left;
  color: #FFFFFF;

  .t-button__text {
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      z-index: 2;
      font-size: 12px;
      font-weight: bold;
      margin-right: 6px;

      &:after {
        position: absolute;
        display: inline-block;
        content: '';
        top: 50%;
        left: 50%;
        width: 14px;
        height: 14px;
        z-index: -1;
        background-color: #FFFFFF;
        border-radius: var(--td-radius-round);
        transform: translateX(-50%) translateY(-50%);
      }
    }
  }
}

.action-btn1 {
  background-color: #14A54E;
  border: 1px solid #14A54E;

  i {
    color: #14A54E;
  }
}

.action-btn2 {
  background-color: #FF5C46;
  border: 1px solid #DFE3E7;
}

.action-btn3 {
  background-color: #565656;
  border: 1px solid #DFE3E7;
}

.action-btn4 {
  color: black;
  background-color: #F9F9F9;
  border: 1px solid #E1E1E1;
}

/deep/ .filter {
  padding-top: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .t-input, .t-input.t-is-readonly {
    background-color: #F8F8F8;
  }
}

//.import-btn {
//  width: 69px;
//  color: #000000;
//  font-size: 14px;
//  font-weight: 400;
//  line-height: 19.6px;
//  background-color: #F9F9F9;
//  border: 1px solid #E1E1E1;
//}

.income {
  color: #14A54E;
  display: flex;
  align-items: center;

  i {
    width: 17px;
    height: 17px;
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    margin-left: 8px;
    align-items: center;
    justify-content: center;
    background-color: #14A54E;
    border-radius: var(--td-radius-small);
  }
}

.expenditure {
  color: #FF5C46;
  display: flex;
  align-items: center;

  i {
    width: 17px;
    height: 17px;
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    margin-left: 8px;
    align-items: center;
    justify-content: center;
    background-color: #FF5C46;
    border-radius: var(--td-radius-small);
  }
}

.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F9F9F9;
  padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-xl);
  padding-right: var(--td-comp-paddingLR-xxl);
}
</style>
